<template>
  <div class="page-container pixi-test">
    <div class="pixi-box" id="pixiBox" ref="pixiBox"></div>
  </div>
</template>
<script setup>
  import * as PIXI from 'pixi.js'
  import { getCurrentInstance, onMounted, reactive, computed, ref } from 'vue'
  const {proxy} = getCurrentInstance()
  const pixiApp = ref(null)

  const canvasSize = computed(() => {
    return {
      width: proxy.$refs['pixiBox'].offsetWidth - 40,
      height: proxy.$refs['pixiBox'].offsetHeight - 40
    }
  })
  // 初始化画布
  const initCanvas = () => {
    pixiApp.value = new PIXI.Application({
      width: canvasSize.value.width,
      height: canvasSize.value.height,
      backgroundColor: 'lightBlue'
    })
    document.getElementById('pixiBox').appendChild(pixiApp.value.view)
  }
  const drawBgImg = () => {
    const source = PIXI.Sprite.from('@/assets/img/test.jpg')
    // console.log('source', source)
    pixiApp.value.stage.addChild(source);
    console.log('pixiApp', pixiApp.value.stage)
  }
  // 加载资源
  const loadAssets = () => {}

  onMounted(async () => {
    await initCanvas()
    await drawBgImg()
  })
  // 画图
</script>
<style scoped>
  .pixi-test{
    padding: 20px;
    .pixi-box{
      background: #ccc;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
